<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .box {
          width: 300px;
          height: 200px;
          border: 1px solid black;
          float: left;
          margin-left: 50px;
          font-size: 20px;
        }
        .box1 {
          background-image: linear-gradient(red,yellow,green);
        }
        .box2 {
          /* 指定方向的渐变 */
          background-image: linear-gradient(to right top,red,yellow,green);
        }
        .box3 {
          background-image: linear-gradient(20deg,red,yellow,green);
        }
        .box4 {
          background-image: linear-gradient(red 50px,yellow 100px,green 150px);
        }
        .box5 {
          font-size: 80px;
          text-align: center;
          line-height: 200px;
          font-weight: bold;
          -webkit-background-clip: text;
          color: transparent;
          /* 渐变字体*/
          background-image: linear-gradient(to right top,red,yellow,green);
        }
    </style>
</head>
<body>
    <div class="box box1">(默认效果)从上到下</div>
    <div class="box box2">(在颜色前指定方向 特殊词)</div>
    <div class="box box3">(在颜色前指定方向 角度)</div>
    <div class="box box4">(指定在哪个颜色到那个位置)之前是纯色 之后是渐变的下一个颜色</div>
    <div class="box box5">你好啊</div>
</body>
</html>